<template>
  <Card :bordered="false" :style="{ height: '100%' }">
    <Row :gutter="24">
      <Col :md="4">
      <a-list itemLayout="vertical" :dataSource="roles">
        <ListItem slot="renderItem" slot-scope="item, index" :key="index">
          <ListItem-meta :style="{ marginBottom: '0' }">
            <span slot="description" style="text-align: center; display: block">{{ item.describe }}</span>
            <a slot="title" style="text-align: center; display: block" @click="edit(item)">{{ item.name }}</a>
          </ListItem-meta>
        </ListItem>
      </a-list>
      </Col>
      <Col :md="20">
      <div style="max-width: 800px">
        <Divider v-if="isMobile()" />
        <div v-if="mdl.id">
          <h3>角色：{{ mdl.name }}</h3>
        </div>
        <Form :model="form" :layout="isMobile() ? 'vertical' : 'horizontal'">
          <FormItem label="唯一键">
            <Input v-decorator="[ 'id', {rules: [{ required: true, message: 'Please input unique key!' }]} ]" placeholder="请填写唯一键" />
          </FormItem>

          <FormItem label="角色名称">
            <Input v-decorator="[ 'name', {rules: [{ required: true, message: 'Please input role name!' }]} ]" placeholder="请填写角色名称" />
          </FormItem>

          <FormItem label="状态">
            <Select v-decorator="[ 'status', {rules: []} ]">
              <Option :value="1">正常</Option>
              <Option :value="2">禁用</Option>
            </Select>
          </FormItem>

          <FormItem label="备注说明">
            <Input type="textarea" :row="3" v-decorator="[ 'describe', {rules: [{ required: true, message: 'Please input role name!' }]} ]" placeholder="请填写角色名称" />
          </FormItem>

          <FormItem label="拥有权限">
            <Row :gutter="16" v-for="(authorities, index) in authoritiess" :key="index">
              <Col :xl="4" :lg="24">
              {{ authorities.name }}：
              </Col>
              <Col :xl="20" :lg="24">
              <a-checkbox
                v-if="authorities.actionsOptions.length > 0"
                :indeterminate="authorities.indeterminate"
                :checked="authorities.checkedAll"
                @change="onChangeCheckAll($event, authorities)">
                全选
              </a-checkbox>
              <a-checkbox-group :options="authorities.actionsOptions" v-model="authorities.selected" @change="onChangeCheck(authorities)" />
              </Col>
            </Row>
          </FormItem>

        </Form>
      </div>
      </Col>
    </Row>
  </Card>
</template>

<script>
import { getRoleList, getauthoritiess } from '@/api/manage'
import { mixinDevice } from '@/utils/mixin'
import pick from 'lodash.pick'

export default {
  name: 'RoleList',
  mixins: [mixinDevice],
  components: {},
  data () {
    return {
      form: this.$form.createForm(this),
      mdl: {},

      roles: [],
      authoritiess: []
    }
  },
  created () {
    getRoleList().then((res) => {
      this.roles = res.result.data
      this.roles.push({
        id: '-1',
        name: '新增角色',
        describe: '新增一个角色'
      })
      console.log('this.roles', this.roles)
    })
    this.loadauthoritiess()
  },
  methods: {
    callback (val) {
      console.log(val)
    },

    add () {
      this.edit({ id: 0 })
    },

    edit (record) {
      this.mdl = Object.assign({}, record)
      // 有权限表，处理勾选
      if (this.mdl.authoritiess && this.authoritiess) {
        // 先处理要勾选的权限结构
        const authoritiessAction = {}
        this.mdl.authoritiess.forEach(authorities => {
          authoritiessAction[authorities.authoritiesId] = authorities.actionEntitySet.map(entity => entity.action)
        })

        console.log('authoritiessAction', authoritiessAction)
        // 把权限表遍历一遍，设定要勾选的权限 action
        this.authoritiess.forEach(authorities => {
          const selected = authoritiessAction[authorities.id]
          authorities.selected = selected || []
          this.onChangeCheck(authorities)
        })

        console.log('this.authoritiess', this.authoritiess)
      }

      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.mdl, 'id', 'name', 'status', 'describe'))
      })
      console.log('this.mdl', this.mdl)
    },

    onChangeCheck (authorities) {
      authorities.indeterminate = !!authorities.selected.length && (authorities.selected.length < authorities.actionsOptions.length)
      authorities.checkedAll = authorities.selected.length === authorities.actionsOptions.length
    },
    onChangeCheckAll (e, authorities) {
      console.log('authorities:', authorities)
      Object.assign(authorities, {
        selected: e.target.checked ? authorities.actionsOptions.map(obj => obj.value) : [],
        indeterminate: false,
        checkedAll: e.target.checked
      })
    },
    loadauthoritiess () {
      getauthoritiess().then(res => {
        const result = res.result
        this.authoritiess = result.map(authorities => {
          const options = JSON.parse(authorities.actionData)
          authorities.checkedAll = false
          authorities.selected = []
          authorities.indeterminate = false
          authorities.actionsOptions = options.map(option => {
            return {
              label: option.describe,
              value: option.action
            }
          })
          return authorities
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
